<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加素材</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">添加素材</div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="">
                                <input type="hidden" name="id" value="0">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入文字" value="" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">类型</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="type" value="1" title="文字"   lay-filter="type">
                                        <input type="radio" name="type" value="3" title="图片"   lay-filter="type">
                                        <input type="radio" name="type" value="5" title="视频"   lay-filter="type">
                                        <input type="radio" name="type" value="2" title="语音"   lay-filter="type">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text" id="content_block" style="display: none">
                                    <label class="layui-form-label">内容</label>
                                    <div class="layui-input-block">
                                        <textarea name="content" placeholder="请输入内容，不超过2000个字符" class="layui-textarea" lay-verify="content"></textarea>
                                    </div>
                                </div>
                                <div class="layui-upload"  id="image_block" style="display: none">
                                    <button type="button" class="layui-btn" id="test1">上传图片</button>(支持jpg|jpeg|png)
                                    <div class="layui-upload-list" id="image_list" style="width: 300px;">
                                        <img class="layui-upload-img" id="demo1" style="width: 200px;"><p id="demoText"></p>
                                    </div>
                                </div>
                                <div class="layui-upload"  id="video_block" style="display: none">
                                    <button type="button" class="layui-btn" id="test2">上传视频</button>(支持mp4)
                                    <div class="layui-upload-list" id="video_list" style="width: 300px;">
                                        <p id="demoText2"></p>
                                    </div>
                                </div>
                                <div class="layui-upload"  id="mp3_block" style="display: none">
                                    <button type="button" class="layui-btn" id="test3">上传语音</button>(支持mp3)<div class="layui-upload-list" id="mp3_list" style="width: 300px;">
                                    <p id="demoText3"></p>
                                </div>
                                </div>
                                <input type="hidden" id="file_name" name="file_name" value="">
                                <div class="layui-field-box">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">可选组</label>
                                        <div class="layui-input-block" id="availableGroups">
                                            <div class="layui-form-mid">无</div>
                                        </div>
                                        <div class="layui-form-mid layui-text"><a href="index.html" target="_blank"><i class="layui-icon layui-icon-about" style="color: #1E9FFF;"></i>素材组管理</a></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <a class="layui-btn" lay-submit lay-filter="formSubmit">提交</a>
                                        <a class="layui-btn layui-btn-primary" href="index.html">取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'upload'], function(){
            var $ = layui.$
                ,form = layui.form
                ,upload = layui.upload;

            var getExistGroup;
            getExistGroup = function () {
                // var objs = $('.existGroup');
                var objs = $('.wechatGroup:checked');
                var hasGroup = false;
                $.each(objs, function (index, obj) {
                    hasGroup = true;
                });
                return hasGroup;
            };

            form.verify({
                content: function (value) {
                    // var status = $("input[ name='status' ]:checked ").val();
                    var type = $("input[ name='type' ]:checked ").val();
                    var title = $("input[ name='title' ]").val();
                    var file_name = $("input[ name='file_name' ]").val();
                    // console.log(name);
                    // if (status == undefined) {
                    //     return '请选择状态';
                    // } else {
                    if (title == '') {
                        return '请输入标题';
                    }else {
                        if (type == 1) {
                            if (value.length < 2) {
                                return '内容不能少于2个字符';
                            } else if (value.length > 2000) {
                                return '内容不能超过2000个字符';
                            }
                        } else if (type == 3) {
                            if (file_name == undefined) {
                                return '请上传图片';
                            }
                        }else if (type == undefined) {
                            return '请选择类型';
                        }
                    }
                    // }
                }
            });

            //监听提交
            form.on('submit(formSubmit)', function(data){
                var hasGroup = getExistGroup();
                if (!hasGroup) {
                    layer.msg('请选择执行的素材组', {icon: 5});
                    return false
                }

                layer.msg('提交中', {
                    shadeClose: false
                    ,icon: 16
                    ,shade: 0.01
                });
                $.ajax({
                    type: "POST",
                    url: "/material/save_material",
                    data: data.field,
                    success:function(response){
                        var dataObj=$.parseJSON(response);
                        if (dataObj.code===0) {
                            layer.msg('数据提交成功', {icon: 6});
                            setTimeout(function(){
                                location.href = '/material/index';
                            }, 1000);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }
                    },
                    error: function (request, status, error) {
                        layer.msg('哦噢，网络开小差了', {icon: 5});
                    }
                });
                return false;
            });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '/material/upload'
                ,field: 'image'
                ,acceptMime: 'image/jpg, image/png, image/gif, image/jpeg,'
                ,accept: 'file' //普通文件
                ,exts: 'jpg|jpeg|png' //只允许上传图片
                ,size: 1024*4 //限制文件大小，单位 KB
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                        // $('#image_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;">');
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        addImageHiddenField(res.value);
                        $('#demoText').append('<labe>'+res.msg+'</labe>');
                        //$('#image_list').append('<img id="imagePreview'+imageNum+'" num="'+imageNum+'" src="//'+ res.value +'" alt="'+ res.origin +'" class="layui-upload-img" style="width: 100px;">');
                        // $('#image_list').append('<labe>'+res.msg+'</labe>');
                    }

                    if(res.code < 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            //视频上传
            var uploadVideo = upload.render({
                elem: '#test2'
                ,url: '/material/uploadVideo'
                ,field: 'video'
                // ,acceptMime: 'mp4'
                ,accept: 'video' //普通文件
                ,exts: 'mp4' //只允许上传
                ,size: 1024*10 //限制文件大小，单位 KB
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo2').attr('src', result); //图片链接（base64）
                        // $('#image_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;">');
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        addImageHiddenField(res.value);
                        $('#demoText2').append('<labe>'+res.msg+'</labe>');
                        return layer.msg('上传成功');
                        //$('#image_list').append('<img id="imagePreview'+imageNum+'" num="'+imageNum+'" src="//'+ res.value +'" alt="'+ res.origin +'" class="layui-upload-img" style="width: 100px;">');
                        // $('#image_list').append('<labe>'+res.msg+'</labe>');
                    }

                    if(res.code < 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText2');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadVideo.upload();
                    });
                }
            });

            //音频上传
            var uploadVideo = upload.render({
                elem: '#test3'
                ,url: '/material/uploadAudio'
                ,field: 'audio'
                ,acceptMime: 'mp3'
                ,accept: 'audio' //普通文件
                ,exts: 'mp3' //只允许上传
                ,size: 1024*5 //限制文件大小，单位 KB
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo3').attr('src', result); //图片链接（base64）
                        // $('#image_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px;">');
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        addImageHiddenField(res.value);
                        $('#demoText3').append('<labe>'+res.msg+'</labe>');
                        return layer.msg('上传成功');
                        //$('#image_list').append('<img id="imagePreview'+imageNum+'" num="'+imageNum+'" src="//'+ res.value +'" alt="'+ res.origin +'" class="layui-upload-img" style="width: 100px;">');
                        // $('#image_list').append('<labe>'+res.msg+'</labe>');
                    }

                    if(res.code < 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText3');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadVideo.upload();
                    });
                }
            });

            var addImageHiddenField = function (value) {
                $('#file_name').val(value);
            };

            form.on('radio(type)', function(data){
                // console.log(data.elem); //得到radio原始DOM对象
                // console.log(data.value); //被点击的radio的value值
                var type = data.value;
                if (type == 1) {
                    $('#content_block').show();
                } else {
                    $('#content_block').hide();
                    // $('#image_block').show();
                }

                if (type == 3) {
                    $('#image_block').show();
                } else {
                    $('#image_block').hide();
                }

                if (type == 5) {
                    $('#video_block').show();
                } else {
                    $('#video_block').hide();
                }

                if (type == 2) {
                    $('#mp3_block').show();
                } else {
                    $('#mp3_block').hide();
                }
            });

        });
    </script>
</div>
</body>
</html>
